<script setup lang="ts">
import LeftTop from "./left-top.vue";
import LeftCenter from "./left-center.vue";
import LeftBottom from "./left-bottom.vue";
import CenterMap from "./center-map.vue";
import CenterBottom from "./center-bottom.vue";
import RightBottom from "./right-bottom.vue";
import { onMounted, ref } from "vue";
import ApngPlayer from "@/components/ApngPlayer.vue";
import NewRealtimeList from "@/components/NewRealtimeList.vue";
import $http from "@/api/apiMap";
/* 1. 用一个数组收集 6 个 customBorder 实例，下标 0 空着，1~6 对应 id */
const borders = ref<any[]>([]);
const apngPlayer = ref();
const actionPngSrc = ref("");
// 得到当前Apng图片地址
const getApngSrc = (id: number) => {
    const localUrl = `/src/assets/animation/${id > 10 ? id : "0" + id}_iSpt.png`;
    const fireworksUrl = new URL(localUrl, import.meta.url).href;
    return fireworksUrl;
};
interface MapEndPayload {
    id: number;
    cityName: string;
}
// 地图动画结束回调
const mapAnimationEnd = ({ id, cityName }: MapEndPayload) => {
    actionPngSrc.value = getApngSrc(id);
};
// aPng动画结束回调
const apngAnimationEnd = (id: any) => {
    // console.log("aPng动画结束回调 执行了");
    borders.value[0]?.flash();
};
// 边框高亮效果结束回掉
const handleBorderFlashEnd = (key: number) => {
    // console.log("边框高亮效果结束回掉 执行了", key);
    if (key == 0) {
        getRetimeOrderList();
    }
    if (key == 1) {
        getRetimeContributionList();
    }
};

onMounted(() => { });
// ------------------------------   实时订单  ----------------------------
// 定义订单接口
interface OrderItem {
    orderId: number;
    username: string;
    product_name: string;
    order_time: string | number;
    // 可以根据需要添加更多字段
}
const retimeOrderCol = ref([
    { title: "用户名", key: "username" },
    { title: "操作", key: "product_name" },
    { title: "添加时间", key: "order_time" },
]);
const retimeOrderConfig = {
    requestMethod: "get_order_list",
    idKey: "orderId",
    timeType: "number",
};
const retimeOrderRef = ref();
function retimeOrderAdd(data: OrderItem[]) {
    // console.log("实时订单开始追加");
    retimeOrderRef.value && retimeOrderRef.value?.appendData(data);
}
const retimeOrderCallBack = () => {
    // console.log("订单列表执行完成");
    borders.value[1]?.flash();
};

// 获取实时订单量
const getRetimeOrderList = () => {
    $http.get_order_list().then(res => {
        const data = res.data;
        retimeOrderAdd(data);
    });
};
// ----------------------------   实时贡献值     --------------------------------------
// 定义实时贡献值接口
interface ContributionItem {
    id: number;
    username: string;
    privilegeName: string;
    createTime: string | number;
    // 可以根据需要添加更多字段
}
const retimeContributionConfig = {
    requestMethod: "get_gxz_award_list",
    idKey: "id",
    timeType: "string",
};
const retimeContributionCol = ref([
    { title: "用户名", key: "username" },
    { title: "操作", key: "changeValue" },
    { title: "添加时间", key: "createTime" },
]);
const retimeContributionRef = ref();
function retimeContributionAdd(data: ContributionItem[]) {
    // console.log("贡献值开始追加");
    retimeContributionRef.value && retimeContributionRef.value?.appendData(data);
}
const retimeContributionCallBack = () => {
    // console.log("贡献值列表执行完成");
    borders.value[2]?.flash();
};

// 获取实时贡献值
const getRetimeContributionList = () => {
    $http.get_privilege_award_list().then(res => {
        const data = res.data;
        retimeContributionAdd(data);
    });
};
</script>

<template>
    <div class="index-box">
        <div class="contetn_left">
            <customBorder class="contetn_left-top contetn_lr-item" title="订单信息">
                <LeftTop />
            </customBorder>
            <customBorder class="contetn_left-center contetn_lr-item" title="用户统计">
                <LeftCenter />
            </customBorder>
            <customBorder class="contetn_left-bottom contetn_lr-item" title="会员权益放送">
                <LeftBottom />
            </customBorder>
        </div>
        <div class="contetn_center">
            <!-- 地图组件 -->
            <CenterMap class="contetn_center_top" @mapAnimationEnd="mapAnimationEnd" />
            <ApngPlayer ref="apngPlayer" class="action-animation" :src="actionPngSrc" @apngAnimationEnd="apngAnimationEnd" />
            <customBorder class="contetn_center-bottom" title="订单成交趋势">
                <CenterBottom />
            </customBorder>
        </div>
        <div class="contetn_right">
            <customBorder :ref="(el: any) => (borders[0] = el)" :onFlashEnd="() => handleBorderFlashEnd(0)" class="contetn_left-bottom contetn_lr-item" title="实时订单量">
                <NewRealtimeList :config="retimeOrderConfig" :columns="retimeOrderCol" ref="retimeOrderRef" actionName="购买了" :onDone="retimeOrderCallBack"></NewRealtimeList>
            </customBorder>
            <customBorder :ref="(el: any) => (borders[1] = el)" :onFlashEnd="() => handleBorderFlashEnd(1)" class="contetn_left-bottom contetn_lr-item" title="实时贡献值">
                <NewRealtimeList
                    :config="retimeContributionConfig"
                    :columns="retimeContributionCol"
                    ref="retimeContributionRef"
                    actionName="获得了"
                    :onDone="retimeContributionCallBack"
                ></NewRealtimeList>
            </customBorder>
            <customBorder :ref="(el: any) => (borders[2] = el)" :onFlashEnd="() => handleBorderFlashEnd(2)" class="contetn_left-bottom contetn_lr-item" title="实时权益值 ">
                <RightBottom />
            </customBorder>
        </div>
    </div>
</template>

<style lang="scss" scoped>
$width: 800;
$height: 750;
.index-box {
    width: 100%;
    display: flex;
    min-height: calc(100% - 64px);
    justify-content: space-between;
    position: relative;
    top: -20px;
}

//左边 右边 结构一样
.contetn_left,
.contetn_right {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
    width: 540px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.contetn_center {
    flex: 1;
    margin: 0 54px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
    .contetn_center-bottom {
        height: 315px;
    }
}

.contetn_lr-item {
    height: 310px;
}
.full-fly-line {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 103;
    background-color: transparent;
}

// 动画action png
.action-animation {
    position: absolute;
    width: #{$width * 1}px;
    height: #{$height * 1}px;
    top: -30px;
    left: 45px;
    max-width: unset;
}
</style>
